<script setup lang="ts">
import { type PropType, ref } from 'vue'
import PlayListSongsItemB from "@/components/playlist/PlayListSongsItemB.vue"
const activedId = ref<string>('')
const changeActive = (id: string):void => {
  activedId.value = id
}
const props = defineProps({
  songs:{
    required: true,
    type: Object as PropType<song_info[]>
  }
})

</script>

<template>
  <dl v-if="songs.length > 0">
    <dd>
      <span class="song-name-and-artist">歌名/歌手</span>
<!--      <span class="song-artist">歌手</span>-->
      <span class="song-album">专辑</span>
      <span class="song-length">时长</span>
    </dd>
    <PlayListSongsItemB v-for="item in songs" :key="item.id" :song="item" @click="changeActive(item.id)" :class="activedId === item.id ? 'active' : ''"></PlayListSongsItemB>
  </dl>
  <span class="no-song" v-else><el-empty description="空空如也" /></span>
</template>

<style lang="scss" scoped>
dl{
  dt:nth-child(2n){
    background-color: #f1f1f1;
  }

  dt:nth-child(2n+1){
    background-color: #f6f6f6;
  }

  dt:hover,
  dt.active
  {
    background-color: #e3e3e3;
  }
}


.song-name-and-artist{
  width: 433px + 200px;
  flex-grow: 3;
}
//.song-artist{
//  width: 300px;
//  flex-grow: 1;
//}
.song-album{
  width: 276px;
  flex-grow: 1;
}
.song-length{
  width: 50px;
  flex-grow: 1;
}

dd {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 12px;
  color:#7c7c7c;
  z-index: 10;

  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: #f6f6f6;

  span{
    display: block;
  }



  &.fixed{
    transform: scale(0.5);
    transform-origin: top left;
  }

}

.no-song{
  display: block;
  min-height: 400px;
  width: 100%;
  font-size: 32px;
  margin: 0 auto;
  text-align: center;
  //margin-top: 200px;
}

</style>